<template>
	<div>
		<div class="header">
			<div>角色名称</div><div>操作</div>
		</div>
		<div class="header content" v-for="item in tableData" :key="item.id">
			<div>{{item.name}}</div>
			<div>
				<div class="operation">
					<a @click.stop="Onoperation('edit', item)" class="edit">编辑</a>
					<a @click.stop="Onoperation('delete', item)" class="del">删除</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	defineProps({
		tableData: {
			type: Array,
			default() {
				return [];
			},
		},
	});
	const EMITS = defineEmits(["operation"]);
	
	const Onoperation = (index, row) => {
		EMITS("operation", index, row);
	};
</script>

<style lang="less" scoped>
	// table{
	// 	width: 100%;
	// }
	.header{
		width: 100%;
		display: flex;
		text-align: center;
		font-size: 16px;
		background-color: #f6f8fc;
		padding: 10px 0;
		>div{
			width: 50%;
		}
	}
	.content{
		background-color: @white;
		border-bottom: 1px solid #ccc;
		overflow: auto;
	}
</style>